<template>
  <div class="advanced-page">
    <div class="page-header">
      <h1>第三题</h1>
      <ol class="description-list">
        <li>写一个账单管理组件,包含添加、删除、查询功能</li>
        <li>示例图片在assets文件夹下</li>
      </ol>
    </div>
    
    <div class="content-section">
      <BillManagement />
    </div>
  </div>
</template>

<script>
import BillManagement from '@/components/BillManagement.vue';

export default {
  name: 'AdvancedPage',
  components: {
    BillManagement
  }
};
</script>

<style scoped>
.advanced-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 2rem;
  text-align: center;
}

.page-header h1 {
  font-size: 2.2rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.description-list {
  color: #7f8c8d;
  font-size: 1.1rem;
  text-align: left;
  padding-left: 2rem;
  margin: 1rem auto;
  max-width: 600px;
}

.description-list li {
  margin-bottom: 0.5rem;
}

.content-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  min-height: 400px;
}
</style> 